<template>
  <div class="a1">
    <div class="beijing">
    <div class="a2">
      <h1>图书馆</h1>
    </div>
    <div class="block">
      <el-carousel :interval="4000" type="card" height="500px">
        <el-carousel-item v-for="item in imgs" :key="item.index">
          <img :src="item.local" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>

      <el-container>
        <el-header>
          <el-tabs v-model="activeName" @tab-click="handleClick"  >
            <el-tab-pane label="用户管理" name="first">
              <div>
                <img src="https://lib.gkd.edu.cn/images/libsjk/paper.jpg" alt="">
            </div>
          </el-tab-pane>
            <el-tab-pane label="图书馆活动" name="second"><img class="peizhiguanli_img" src="https://ts1.cn.mm.bing.net/th?id=OIP-C.kcNyzUZ0eMC-kmQ4xEJo1gHaFj&w=190&h=185&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
            
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"
              >定时任务补偿</el-tab-pane
            >
          </el-tabs>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <ul>
              <li>图书馆新闻</li>
              <li>全体人员</li>
              <li>图书馆开学寄语</li>
              <li>中国知网</li>
              <li>新闻资讯</li>
              <li>图书信息</li>
              <li>开馆时间</li>
              
            </ul>
          </el-aside>
        </el-container>


        <el-footer>
          <Footer></Footer>
        </el-footer>
      </el-container>
    </div>

    <!-- <img src="../assets/banner-3.jpg" alt="图书馆照片" style="background-size: cover;">   --></div>
  </div>
</template>

<script>
import Footer from "../components/library/Footer.vue";

export default {
  name: "AppIndex",
  data() {
    return {
      imgs: [
        { local: "https://lib.gkd.edu.cn/images/banner-2.jpg" },
        { local: "https://lib.gkd.edu.cn/images/banner-1.jpg" },
        { local: "https://lib.gkd.edu.cn/images/banner-4.jpg" },
        { local: "https://lib.gkd.edu.cn/images/banner-3.jpg" },
      ],
    };
  },
  components: { Footer },
};
</script>

<style scoped>
.a1 {
  margin-top: 150px;
  width: 100%;
  height: 100%;
}
.a2 {
  margin-top: -120px;
  margin-bottom: 30px;
}
.el-header,
.el-footer {
  background-color: azure;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin-top: 303px;
}
.el-main {
  background-color: aquamarine;
  color: #333;
  text-align: center;
  line-height: 160px;
  width: 300px;
}
.el-aside {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  height: 262px;
  position: absolute;
  margin-top: 10px;
}
.el-tab-pane {
  /* background-color: red; */
}
.el-tab-pane[data-v-5da00ae1] {
    /* background-color: red; */
    margin-left: 180px;
    height: 300px;
}
.el-container.is-vertical {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-top: -263px;
}
li{
  margin-bottom: 14px;
  text-size-adjust: 12px; 
}
.peizhiguanli_img{
  position: absolute;
    margin-left: -624px;
}
.beijing{
    width: 100%;
    height: 860px;
    background-image: url('../assets/shudianbeijing.jpg');
    background-size: cover;
}

</style>

